import React from "react";
import {
  CheckStatusBgColor,
  CheckStatusColor,
  CheckStatusEnum,
  CheckStatusEnumIcon,
  CheckStatusEnumText,
} from "../../../../src/interfaces";
import menuIcon from "../../../assets/menu-icon.png";
import "./index.scss";

/** 任务确认信息 */
export const TaskFooter = ({
  onCheck,
  onFail,
  status,
}: {
  onCheck?: () => void;
  onFail?: () => void;
  status: CheckStatusEnum;
}) => {
  return (
    <div className="task-footer">
      <div className="wrapper">
        {status !== CheckStatusEnum.unCheck && (
          <div
            className="result"
            style={{ background: `${CheckStatusBgColor[status]}` }}
          >
            <span
              className={`left iconfont ${CheckStatusEnumIcon[status]}`}
              style={{ color: CheckStatusColor[status] }}
              onClick={onCheck}
            ></span>
            <span>
              您已给出决定：【
              {CheckStatusEnumText[status]}】
            </span>
          </div>
        )}
        {status === CheckStatusEnum.unCheck && (
          <div className="operation">
            <span
              className={`left iconfont ${CheckStatusEnumIcon.check}`}
              style={{ color: CheckStatusColor.check }}
              onClick={onCheck}
            ></span>
            <span
              className={` iconfont ${CheckStatusEnumIcon.notCheck}`}
              style={{ color: CheckStatusColor.notCheck }}
              onClick={onFail}
            ></span>
          </div>
        )}
      </div>
    </div>
  );
};
